<template>
	<div class="photo-list-contioner">
		<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control-negative mui-segmented-control mui-segmented-control-inverted">
		    <div class="mui-scroll">
		        <a :class="['mui-control-item', item.id == 0 ? 'mui-active' : '']" v-for="item in photocate" :key="item.id" @tap="getPhotoListByCateId(item.id)">
		            {{item.name}}
		        </a>
		    </div>
		</div>
		
		<div class="photo-detail">
			
			<div class="mui-card" v-for="item in photlist" :key="item.id">
				<router-link :to="'/home/photolist/detail/'+item.id">
				<div class="mui-card-content">
					<img :src="item.imgUrl" />
					<div class="mui-card-content-inner">
						<p>{{item.desc}}</p>
					</div>
				</div>
				</router-link>
			</div>
		</div>
	</div>
</template>

<script>
	// 1. 导入 mui 的js文件
	import mui from "../../lib/mui/js/mui.min.js";
	export default{
		data(){
			return {
				photocate:[],   //图片类目
				photlist:[]		//图片列表
			}
		},
		created() {
			this.getPhotoCate();
			this.getPhotoListByCateId(0);
		},
		methods:{
			getPhotoCate(){
				this.$http.get("/myvue/photo/cate").then(res=>{
					this.photocate = this.photocate.concat(res.body);
				});
			},
			getPhotoListByCateId(id){
				this.$http.get("/myvue/photo/list?cateid="+id).then(res=>{
					this.photlist = res.body;
				});
			}
		},
		mounted() {
			// 当 组件中的DOM结构被渲染好并放到页面中后，会执行这个 钩子函数
			// 如果要操作元素了，最好在 mounted 里面，因为，这里时候的 DOM 元素 是最新的
			// 2. 初始化滑动控件
			mui(".mui-scroll-wrapper").scroll({
			  deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			});
		}
	}
</script>

<style lang="scss" scoped="scoped">
	*{
		touch-action: pan-y; 
	}
	.photo-detail{
		img{
			width: 100%;
		}
		p{
			font-size: 11px;
			color:#0062CC
		}
	}
</style>
